<template>
  <div class="container">
    <itemSwiper />
    <itemProduct />

    <div class="tag">
      <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
        <van-tabbar-item info @click="routerLink(`home`)">
          <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal">
        </van-tabbar-item>
        <van-tabbar-item info @click="routerLink(`type`)">
          <img slot="icon" slot-scope="props" :src="props.active ? icon1.active : icon1.normal">
        </van-tabbar-item>
        <van-tabbar-item info @click="routerLink(`cart`)">
          <img slot="icon" slot-scope="props" :src="props.active ? icon2.active : icon2.normal">
        </van-tabbar-item>
        <van-tabbar-item info @click="routerLink(`my`)">
          <img slot="icon" slot-scope="props" :src="props.active ? icon3.active : icon3.normal">
        </van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>
<script>
import itemSwiper from '@/components/banner'
import itemProduct from '@/components/item/item-product-list'
export default {
  components: {
    itemSwiper,
    itemProduct
  },
  data() {
    return {
      active: 0,
      active1: 0,
      active2: 0,
      active3: 0,
      icon: {
        normal: './static/home-un.png',
        active: './static/home.png'
      },
      icon1: {
        normal: './static/search-un.png',
        active: './static/search.png'
      },
      icon2: {
        normal: './static/cart-un.png',
        active: './static/cart.png'
      },
      icon3: {
        normal: './static/my-un.png',
        active: './static/my.png'
      }
      // images: [
      //   'http://placehold.it/1600x900',
      //   'http://placehold.it/1600x900',
      //   'http://placehold.it/1600x900'
      // ]
    }
  },
  methods: {
    routerLink(href) {
      this.$router.push({
        name: href
      })
    }
  }
}
</script>
<style lang="less" >
body {
  background: #f5f6f8;
}
.container {
  width: 100%;
  margin: 0 auto;
  .swiper {
    // height: 100vh;
    width: 92%;
    margin: 0 auto;
    border-radius: 20px;
    img {
      width: 100%;
    }
  }
  .tag {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  // .list {
  //   margin: 0 auto;
  //   width: 96%;
  //   display: flex;
  //   justify-content: space-around;
  //   flex-wrap: wrap;
  //   margin-bottom: 60px;
  //   .list-item {
  //     width: 45%;
  //     margin: 5px 3px 8px;
  //     background: #fff;
  //     border-radius: 10px;
  //     img {
  //       width: 100%;
  //     }
  //     .pic {
  //       width: 160px;
  //       height: 120px;
  //       padding: 25px 0;
  //     }
  //     .item-name {
  //       font-size: 16px;
  //       color: #000;
  //       font-weight: bold;
  //       padding: 5px 10px;
  //     }
  //     .stock {
  //       font-size: 14px;
  //       color: #999999;
  //       padding: 5px 10px;
  //     }
  //     .pirse {
  //       color: #d63a54;
  //       font-size: 16px;
  //       padding: 5px 10px;
  //       text-align: right;
  //       span {
  //         font-size: 22px;
  //       }
  //     }
  //   }
  // }
}
.van-tabbar-item__icon {
  margin-top: 8px;
  margin-bottom: auto !important;
}
.van-tabbar-item__icon img {
  display: block;
  height: 40px;
}
</style>
